/**
`styled-components`  是一个流行的 CSS-in-JS 库，允许开发者在 React 组件中使用 ES6 和 CSS 的语法来编写样式。它通过将样式与组件逻辑结合在一起，提供了一种更具模块化和可维护性的方式来处理样式。
  1. 基本概念
  -  `styled-components`  允许你创建具有样式的 React 组件，每个组件都可以有自己的样式，而这些样式是以 JavaScript 对象的形式书写的。
  - 它使用标签模板字面量（template literals）来定义组件的样式，并自动处理样式的作用域，避免样式冲突。

  2. 安装
  首先，需要在项目中安装  `styled-components` ：
  npm install styled-components
  3. 使用方式
  创建样式化组件
  使用  `styled`  函数创建一个样式化组件。可以使用 HTML 标签或已有的 React 组件作为基础。
  示例：
  jsx
  import styled from 'styled-components';

  // 创建一个样式化的按钮组件
  const Button = styled.button`
    background-color: lightblue;
    color: darkblue;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;

    &:hover {
      background-color: darkblue;
      color: white;
    }
  `;

  // 使用样式化的按钮组件
  const App = () => {
    return (
      <div>
        <Button>Click Me</Button>
      </div>
    );
  };

  export default App;
  4. 动态样式
  可以根据组件的 props 来动态改变样式。
  示例：
  jsx
  const Button = styled.button`
    background-color: ${props => props.primary ? 'darkblue' : 'lightblue'};
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  `;

  // 使用动态样式的按钮组件
  const App = () => {
    return (
      <div>
        <Button primary>Primary Button</Button>
        <Button>Secondary Button</Button>
      </div>
    );
  };
  5. 主题支持
  `styled-components`  支持主题，可以使用  `ThemeProvider`  来提供全局主题。

  示例：
  jsx
  import { ThemeProvider } from 'styled-components';

  const theme = {
    primaryColor: 'darkblue',
    secondaryColor: 'lightblue',
  };

  const Button = styled.button`
    background-color: ${props => props.theme.primaryColor};
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  `;

  // 使用主题的按钮组件
  const App = () => {
    return (
      <ThemeProvider theme={theme}>
        <Button>Click Me</Button>
      </ThemeProvider>
    );
  };

  6. 总结
  `styled-components`  是一个强大的工具，允许开发者在 React 中使用 CSS-in-JS 的方式来编写样式。它通过将样式与组件逻辑结合，提高了代码的可维护性和可读性。动态样式和主题支持使得它在构建复杂的 UI 时非常灵活。对于希望实现模块化和可复用样式的开发者来说， `styled-components`  是一个非常好的选择。
 */
import React, { PureComponent } from 'react'
import Home from './home'
import { AppWrapper, SectionWrapper} from "./style"

export default class App extends PureComponent {
  constructor() {
    super()
    this.state = {
      size: 14,
      color: "red"
    }
  }
  
  render() {
    const { size, color } = this.state
    
    return (
      <AppWrapper>
        <SectionWrapper size={size}>
          <h3 className='title'>styled-components 是一个强大的工具</h3>
          <p className='content'>React 中使用 CSS-in-JS 的方式来编写样式。它通过将样式与组件逻辑结合，提高了代码的可维护性和可读性</p>
        </SectionWrapper>

        <Home/>

        <div className="footer">
          <p>免责声明</p>
          <p>版权声明</p>
        </div>
      </AppWrapper>
    )
  }
}
